<template>
  <div id="skybox"> 
  </div>
</template>
<script>
import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
import posximgUrl from '../assets/posx.jpg'
import negximgUrl from '../assets/negx.jpg';
import posyimgUrl from '../assets/posy.jpg';
import negyimgUrl from '../assets/negy.jpg';
import poszimgUrl from '../assets/posz.jpg';
import negzimgUrl from '../assets/negz.jpg';
export default {
  name: 'skybox',
  data(){
      return{
        imgSrc: [posximgUrl,negximgUrl,posyimgUrl,negyimgUrl,poszimgUrl,negzimgUrl],
      }
  },
  methods:{
      test_texture(){
        let container = document.getElementById("skybox");
        container.style.height = window.innerHeight + "px"
        let scene = new THREE.Scene();
        let geometry = new THREE.BoxGeometry(1000, 1000, 1000);
        //创建纹理加载器对象，可以使用图片作为几何体纹理
        let textureLoader = new THREE.TextureLoader();
        let materialArray = [];
        for (let i = 0; i < 6; i++){
            materialArray.push( new THREE.MeshBasicMaterial({
                map: textureLoader.load(this.imgSrc[i]),
                side: THREE.DoubleSide
            }));
        }
        //网格模型对象Mesh    
        let mesh = new THREE.Mesh(geometry, materialArray); 
        scene.add(mesh);
        let width = container.clientWidth; 
        let height = container.clientHeight; 
        let camera = new THREE.PerspectiveCamera(45, width/height, 1, 10000);
        camera.position.set(400,400,400); //设置相机位置
        camera.lookAt(scene.position); //设置相机方向(指向的场景对象)
        //创建渲染器对象
        let renderer = new THREE.WebGLRenderer();
        renderer.setSize(width, height); //设置渲染区域尺寸
        renderer.setClearColor(0xffffff, 1); //设置背景颜色
        container.appendChild(renderer.domElement); //插入canvas对象
        function render(){ 
            renderer.render(scene,camera); 
        }
        render();
        let controls = new OrbitControls(camera,renderer.domElement);//创建控件对象
        controls.addEventListener('change', render);//监听鼠标、键盘事件 
      }
  }, 
  mounted () {
      this.test_texture();
 }
}
</script>

<style scope>
</style>